<template>
  <div class="cart">
	  <header>
		  <i class="iconfont icon-back" @click="$router.back()"></i>
		  <span>购物车</span>
		  <span @click="isNavBar" v-text="isNavStatus ? '完成' : '编辑' "></span>
	  </header>
	  <section v-if="list.length">
		  <div class="cart-title" >
			  <!-- 此处不能用v-model，v-model是双向绑定 -->
			  	<label @click='checkAllFn'>
			    		<input type="radio" :checked='isCheckedAll'/>全选        
			    </label>
			  <span>商品</span>
		  </div>
		  <ul >
		  	<li v-for="(item,index) in list" :key="index">
				<div class="check">
					<label>
							<input type="checkbox" @click="CHECK_ITEM(index)" v-model="item.checked"/>        
					</label>
					<!-- <el-checkbox @click="CHECK_ITEM(index)" v-model="item.checked"></el-checkbox> -->
				</div>
				<h2>
					<img :src="item.goods_imgUrl" alt="">
				</h2>
				<div class="goods">
					<div class="goods-title">
						<span>{{item.goods_name}}</span>
						<i class="iconfont icon-lajitong" @click="delGoodsFn(item.id)"></i>
					</div>
					<div class="goods-price">￥{{item.goods_price}}</div>
					<div class="goods-stepper">
						<el-input-number @change="changeNum($event,item)" v-model="item.goods_num" :step="1" size="mini"></el-input-number>
					</div>
				</div>
			</li>
		  </ul>
	  </section>
	  <section v-else>
		  没有购物车数据
		  <router-link to='/home'>去首页逛逛吧</router-link>
	  </section>
	  <footer v-if="list.length">
		  <div class="radio">
			  <!-- <label @click='checkAllFn'>
			  		<input type="radio" :checked='isCheckedAll'/>全选        
			  </label> -->
			  <label>
			  		<input type="radio" @click='checkAllFn' :checked='isCheckedAll'/>全选        
			  </label>
			  <!-- <el-checkbox @click="checkAllFn" :value="isCheckedAll"></el-checkbox> -->
		  </div>
		  <div class="total" v-show="!isNavStatus">
			  <div>
				  共有
				  <span class="total-active">{{total.num}}</span>
				  件商品
				</div>
			  <div>
				  <span>总计：</span>
				  <span class="total-active">￥{{total.price.toFixed(2)}} + 0 茶币</span>
			  </div>
		  </div>
		  <div class="order" v-if="isNavStatus" @click="delGoodsFn">删除</div>
		  <div class="order" v-else @click="goOrder()">去结算</div>
	  </footer>
  </div>
</template>

<script>
	import http from '@/common/api/request.js'
	import { Toast } from 'mint-ui'
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "Cart",
  data(){
	  return{
		  isNavStatus:false,
		  checked:true
		  // num:1
	  }
  },
  computed:{
	...mapState({
		list:state=>state.cart.list,
		selectList:state=>state.cart.selectList
	}),
	...mapGetters(['isCheckedAll','total']),
	goodsList(){
		return this.selectList.map(value=>{
			return this.list.find(v=>v.id == value);
	    })
	}
  },
  created(){
	  this.getData();
  },
  methods:{
	  ...mapMutations(['CART_LIST','CHECK_ITEM','initOrder']),
	  ...mapActions(['checkAllFn','delGoodsFn']),
	async  getData(){
		  let res = await http.$axios({
		  		url:'/api/selectCart',
				method:'post',
				headers:{
					token:true
				},
		  })
		  //前端添加了一个checked
		  res.data.forEach(v=>{
			  v['checked']=true;
		  })
		  
		  console.log(res.data)
		  this.CART_LIST(res.data);
	  },
	  //点击编辑按钮
	  isNavBar(){
		  this.isNavStatus = !this.isNavStatus;
	  },
	  //修改数量
	  changeNum(value,item){
		  //当前购物车商品的id，以及修改后的数量==>传递给后端
		  //valus就是修改后的数量
		  //item.id就是购物车商品的id
		  http.$axios({
		  		url:'/api/updateNum',
				method:'post',
				header:{
					token:true
				},
				data:{
					id:item.id,
					num:value
				}
		  })
	  },
	  //去结算
	  goOrder(){
		  if( !this.selectList.length ){
			  Toast('请至少选择一件商品');
			  return;
		  } 
		  
		  let newList = [];
		  this.list.forEach(item=>{
			  this.selectList.filter(v=>{
				  if( v == item.id){
					  newList.push(item);
				  }
			  })
		  })
		  
		  //生成一个订单
		  http.$axios({
		  		url:'/api/addOrder',
		  		method:'post',
		  		header:{
		  			token:true
		  		},
		  		data:{
		  			arr:newList
		  		}
		  }).then(res=>{
			  console.log(res)
			  if(!res.data) return;
			  //存储订单号
			  this.initOrder(res.data);
			  //进入提交订单页面
			  this.$router.push({
			  		path:'/order',
			  		query:{
			  			  detail:JSON.stringify(this.selectList),
						  goodsList:JSON.stringify(this.goodsList)
			  		}
			  })
		  })
	  }
  }
  
};
</script>
<style scoped>
	.cart{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.173333rem;
		color: #fff;
		background-color: #b0352f;
	}
	header i{
		padding: 0 0.4rem;
		font-size: 0.586667rem;
	}
	header span{
		padding: 0 0.4rem;
		font-size: 0.48rem;
	}
	section{
		background-color: #f5f5f5;
	}
	section .cart-title{
		display: flex;
		padding: 0.533333rem;
	}
	section .cart-title label{
		font-size: 0.48rem;
	}
	section .cart-title span{
		padding: 0 0.4rem;
		font-size: 0.48rem;
		font-weight: 600;
	}
	section ul{
		display: flex;
		flex-direction: column;
	}
	section ul li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0.213333rem 0;
		padding: 0.16rem 0.533333rem;
		background-color: #fff;
	}
	section ul li .check{
		padding-right: 0.373333rem;
	}
	section ul li .goods{
		display: flex;
		flex-direction: column;
		padding-left: 0.4rem;
		font-size: 0.32rem;
		
	}
	section ul li .goods .goods-title{
		display: flex;
	}
	section ul li .goods .goods-title i{
		font-size: 0.533333rem;
		color: #999;
	}
	section ul li .goods .goods-price{
		padding: 0.08rem 0;
		color: #b0352f;
	}
	/* section ul li .goods .stepper{
		text-align: right;
	} */
	section ul li .goods .goods-stepper{
		text-align: right;
	}
	::v-deep .el-input-number--mini{
		width: 2.666667rem;
	}
	section ul li img{
		width: 1.973333rem;
		height: 1.973333rem;
	}
	footer{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.333333rem;
		border-top: 0.053333rem solid #ccc;
	}
	footer .radio{
		padding: 0 0.32rem;
	}
	footer .radio label{
		font-size: 0.426667rem;
	}
	footer .total{
		flex: 1;
		font-size: 0.32rem;
	}
	footer .total .total-active{
		color: #b0352f;
	}
	footer .order{
		text-align: center;
		width: 3.2rem;
		line-height: 1.333333rem;
		font-size: 0.426667rem;
		color: #fff;
		background-color: #b0352f;
	}
</style>